<template>
  <div class="form-item-el">
    <div v-if="mode === 'DESIGN'">
      <el-time-picker
        disabled
        size="default"
        is-range
        range-separator="至"
        :start-placeholder="placeholder[0]"
        :end-placeholder="placeholder[1]"
      />
      <div v-if="showLength" class="length">
        <span>时长：</span>
        <span>{{ timeLength() }}</span>
      </div>
    </div>
    <div v-else-if="mode === 'PC' && !readonly">
      <el-time-picker
        is-range
        size="default"
        :value-format="format"
        v-model="timeRange"
        @change="changeTime"
        range-separator="至"
        :start-placeholder="placeholder[0]"
        :end-placeholder="placeholder[1]"
      />
      <div v-if="showLength" class="length">
        <span>时长：</span>
        <span>{{ timeLength() }}</span>
      </div>
    </div>
    <div v-else>{{ _value[0] }} ~ {{ _value[1] }}</div>
  </div>
</template>

<script setup>
import moment from "moment";
const date = "2022-01-01 ";
import { isNotEmpty } from "@/utils/validate";
import { computed, onMounted, ref } from "vue";

const props = defineProps({
  mode: {
    type: String,
    default: "DESIGN"
  },
  required: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: Array,
    default: () => []
  },
  format: {
    type: String,
    default: "HH:mm:ss"
  },
  placeholder: {
    type: Array,
    default: () => {
      return ["开始时间", "结束时间"];
    }
  },
  showLength: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(["update:modelValue"]);

const _value = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});
const vantType = computed(() => {
  switch (props.format) {
    case "YYYY":
      return "year-month";
    case "YYYY-MM":
      return "year-month";
    case "YYYY-MM-DD":
      return "date";
    case "YYYY-MM-DD HH":
      return "datehour";
    case "YYYY-MM-DD HH:mm":
      return "datetime";
    case "YYYY-MM-DD HH:mm:ss":
      return "datetime";
    default:
      return "datetime";
  }
});

const showPicker = ref(false);
const valIndex = ref(0);
const timeRange = ref(null);
const timeVal = ref([]);

onMounted(() => {
  if (Array.isArray(props.modelValue) && props.modelValue.length > 0) {
    timeRange.value = [
      isNotEmpty(props.modelValue[0]) ? props.modelValue[0] : "00:00:00",
      isNotEmpty(props.modelValue[1]) ? props.modelValue[0] : "00:00:00"
    ];
  }
});

const loadTime = index => {
  showPicker.value = true;
  valIndex.value = index;
  return timeVal.value[index];
};
const changeTime = val => {
  _value.value = val;
};
const timeLength = () => {
  //求时长算法
  if (Array.isArray(props.modelValue) && props.modelValue.length > 0) {
    if (props.modelValue[0] === props.modelValue[1]) {
      return "0 （时长为0，请确认）";
    }
    let start = moment(date + props.modelValue[0]);
    let mend = moment(date + props.modelValue[1]);
    let hours = mend.diff(start, "hours");
    let minutes = mend.diff(start, "minutes");
    let second = mend.diff(start, "seconds");
    minutes = minutes % 60;
    hours = hours % 24;
    second = second % 60;
    return `${hours > 0 ? hours + "小时 " : " "}
                ${minutes > 0 ? minutes + "分钟 " : " "}
                ${second > 0 ? second + "秒 " : " "}`;
  } else {
    return "先选择时间哦";
  }
};
const formatter = (type, val) => {
  if (type === "year") {
    return `${val}年`;
  } else if (type === "month") {
    return `${val}月`;
  } else if (type === "day") {
    return `${val}日`;
  } else if (type === "hour") {
    return `${val}时`;
  } else if (type === "minute") {
    return `${val}分`;
  }
  return val;
};
</script>

<style lang="scss" scoped>
.length {
  margin-top: 5px;
}
.length:nth-child(2) {
  color: #8c8c8c;
}
:deep(.el-date-editor--datetimerange.el-input__inner) {
  width: 100%;
  max-width: 400px;
}
:deep(.el-range-editor.el-input__wrapper) {
  width: 100%;
  box-sizing: border-box;
}
</style>
